<template>
  <view>
    <u-navbar title="注册" :background="{ background: 'transparent' }" back-icon-color="#fff" title-color="#fff"
      :border-bottom="false" is-fixed></u-navbar>
    <view class="top">
      <image class="bg" src="../../static/images/register.png" mode="widthFix"></image>
    </view>

    <u-gap height="590"></u-gap>

    <view class="u-p-l-65 u-p-r-65">
      <view class="ipt-title">手机号</view>
      <view class="ipt-group">
        <u-input class="ipt" v-model="username" placeholder="请输入手机号"></u-input>
      </view>

      <view class="ipt-title">验证码</view>
      <view class="ipt-group">
        <u-input class="ipt" v-model="code" placeholder="请输入验证码" type="number"></u-input>
        <my-btn :size="[130, 60, 20]" bg="linear-gradient(to right, #fe8448, #fb964e, #f8a753)" color="#fff" round>点击获取</my-btn>
      </view>

      <view class="ipt-title">密码</view>
      <view class="ipt-group">
        <u-input class="ipt" v-model="password" placeholder="请输入密码" type="password" :password-icon="false"></u-input>
      </view>
      
      <view class="flex-row align-center">
        <image src="../../static/icons/fxk2.png" style="width: 36rpx;margin-right: 4rpx;" mode="widthFix"></image>
        <view style="color: #EDAE3C;">我已阅读《..........》</view>
      </view>
    </view>

    <view class="u-p-t-64">
      <my-btn :size="[630, 80, 28]" bg="linear-gradient(to right, #fe8448, #fb964e, #f8a753)" color="#fff" round>注册</my-btn>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        code: ''
      };
    }
  }
</script>

<style lang="scss">
  .top {
    top: 0;
    left: 0;
    position: absolute;

    .bg {
      width: 750rpx;
      height: 590rpx;
    }
  }

  .ipt-title {
    font-size: 34rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }

  .ipt-group {
    margin-bottom: 24rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ipt {
      width: 100%;
    }
  }
</style>
